<template>
  <div>
    <div
      v-if="dict.dictValue == type"
      v-for="dict in dicts"
      :key="dict.dictValue"
      :class="[`type${type}`]"
      style="
        width: 40px;
        height: 16px;
        border-radius: 9px;
        font-size: 12px;
        line-height: 16px;
        text-align: center;
      "
    >
      {{ dict.dictLabel }}
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    type: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      dicts: [
        {
          createTime: null,
          updateTime: null,
          status: "0",
          remark: null,
          dictCode: 109,
          dictSort: 0,
          dictLabel: "必修",
          dictValue: "0",
          dictType: "sys_course_type",
          cssClass: null,
          listClass: "default",
          isDefault: "N",
        },
        {
          createTime: null,
          updateTime: null,
          status: "0",
          remark: null,
          dictCode: 110,
          dictSort: 1,
          dictLabel: "选修",
          dictValue: "1",
          dictType: "sys_course_type",
          cssClass: null,
          listClass: "default",
          isDefault: "N",
        },
        {
          createTime: null,
          updateTime: null,
          status: "0",
          remark: null,
          dictCode: 111,
          dictSort: 2,
          dictLabel: "考证",
          dictValue: "2",
          dictType: "sys_course_type",
          cssClass: null,
          listClass: "default",
          isDefault: "N",
        },
        {
          createTime: null,
          updateTime: null,
          status: "0",
          remark: null,
          dictCode: 112,
          dictSort: 3,
          dictLabel: "工学",
          dictValue: "3",
          dictType: "sys_course_type",
          cssClass: "3",
          listClass: "default",
          isDefault: "N",
        },
      ],
    };
  },
  watch: {
    type(e) {
      console.log(e);
    },
  },
  methods: {},
  created() {},
  mounted() {},
};
</script>
<style scoped lang='scss'>
.type0 {
  background: rgba(40, 178, 139, 0.2);
  color: #28b28b;
}

.type1 {
  background: rgba(44, 172, 255, 0.2);
  color: #2cacff;
}

.type2 {
  background: rgba(150, 73, 228, 0.2);
  color: #9649e4;
}

.type3 {
  background: rgba(248, 154, 51, 0.2);
  color: #f89a33;
}
</style>
